<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_收集表单数据</title>
</head>
<body>
  <div id="test">
    <!-- 
      v-model的本质: 动态value + input事件监听

     -->
    <form action="/xxx">
      <span>用户名: </span>
      <input type="text" v-model="user.username"><br>
  
      <span>密码: </span>
      <input type="password" v-model="user.pwd"><br>
  
      <span>性别: </span>
      <input type="radio" id="female" :value="0" v-model="user.sex">
      <label for="female">女</label>
      <input type="radio" id="male" :value="1" v-model="user.sex">
      <label for="male">男</label><br>
  
      <span>爱好: </span>
      <input type="checkbox" id="basket" value="basket" v-model="user.likes">
      <label for="basket">篮球</label>
      <input type="checkbox" id="foot" value="foot" v-model="user.likes">
      <label for="foot">足球</label>
      <input type="checkbox" id="pingpang" value="pingpang" v-model="user.likes">
      <label for="pingpang">乒乓</label><br>
  
      <span>城市: </span>
      <select v-model="user.cityId">
        <option value="">未选择</option>
        <option value="1">BJ</option>
        <option value="2">SH</option>
        <option value="3">SZ</option>
        <option value="4">WH</option>
      </select><br>
      
      <span>介绍: </span>
      <textarea rows="10" v-model="user.info"></textarea><br><br>
  
      <input type="submit" value="注册" @click.prevent="register">
    </form>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: "#test",
      data: {
        user: {
          username: '',
          pwd: '',
          sex: 0,
          likes: ['foot'],
          cityId: '4',
          info: ''
        }
      },

      methods: {
        register () {
          console.log(this.user)
          alert('准备发送注册的ajax请求')
        }
      }
    })
  </script>
</body>
</html>